<template>
	<view class="content" v-if="info">
		<view class="goodsImage">
			<image v-if="info.goodsImage" :src="info.goodsImage" mode="aspectFill"></image>
		</view>
		<view class="goodsInfo">
			<view class="box1">
				<view class="price">
					<u--text v-if="info.goodsPrice" :text="'￥'+info.goodsPrice" type="error" :lines="1" :size="30"
						bold></u--text>
				</view>
				<view>已售300</view>
			</view>
			<view style="padding-bottom: 20rpx;font-weight: bold;" v-if="info.goodsName">
				<u--text :text="info.goodsName" :lines="1" :size="30"></u--text>
			</view>
			<view style="font-size: 30rpx;padding-bottom: 10rpx;">购买后48小时内发货</view>
		</view>
		<view class="bottomBtn" @click="goPay">
			立即购买
		</view>
		<u-popup :show="show" :round="10" mode="bottom" @close="close" closeable>
			<view class="payContent">
				<view>
					<view class="address" v-if="addressList.length>0">
						<view style="width: 80%;">
							<view>{{addressList[0].shipName}}
								{{addressList[0].provinceName}}{{addressList[0].cityName}}{{addressList[0].areaName}}{{addressList[0].detailAddress}}
							</view>
							<view>{{addressList[0].shipPhone}}</view>
						</view>
						<view>
							<u-icon name="arrow-right" size="48rpx"></u-icon>
						</view>
					</view>
					<view class="add" v-else @click="gotoAddress">
						<u-icon name="plus" color="#1F1F1F" size="38"></u-icon>
						<text style="margin-left: 16rpx;">添加收货地址</text>
					</view>
				</view>
				<view class="payGoods">
					<view class="payGoodsImage">
						<image :src="info.goodsImage" mode="aspectFill"></image>
					</view>
					<view class="box2">
						<view class="payGoodsName">
							<u--text :text="info.goodsName" :lines="1" :size="30"></u--text>
						</view>
						<view class="box3">
							<view>
								<u-number-box v-model="value" :min="1" :max="999">
									<view slot="minus" class="minus">
										<u-icon name="minus" size="24"></u-icon>
									</view>
									<text slot="input" style="min-width: 40rpx;text-align: center;"
										class="input">{{value}}</text>
									<view slot="plus" class="plus">
										<u-icon name="plus" size="24"></u-icon>
									</view>
								</u-number-box>
							</view>
							<view>
								<u--text :text="'￥'+info.goodsPrice" type="error" :lines="1" :size="30" bold></u--text>
							</view>
						</view>
					</view>
				</view>
				<view class="payBtn" @click="payOrder">
					立即支付
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getInfo,
		payOrder
	} from '@/common/index.js'
	export default {
		data() {
			return {
				show: false,
				value: 1,
				info: {},
				id: '',
				userAddressId: '456699905',
				addressList: [],
			};
		},
		onLoad(opt) {
			//console.log(opt);
			this.id = opt.id
		},
		onReady() {
			if (this.id) {
				// //console.log(2222222222);
				this.getDataInfo(this.id)
			}
		},
		methods: {
			goPay() {
				this.show = true
			},
			getDataInfo(id) {
				getInfo(id).then(res => {
					// //console.log(res);
					this.info = res.data
				})
			},
			close() {
				this.show = false
			},
			payOrder() {
				wx.requestPayment({
					"timeStamp": "1414561699",
					"nonceStr": "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
					"package": "prepay_id=wx201410272009395522657a690389285100",
					"signType": "RSA",
					"paySign": "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==",
					"success": function(res) {},
					"fail": function(res) {},
					"complete": function(res) {}
				})
				return;
				
				
				let data = {
					cardGoodsId: this.id,
					count: this.value,
					userAddressId: this.addressList[0].id,
				}
				payOrder(data).then((res) => {
					console.log(res);
					if (res.code == 200) {
						// uni.requestPayment({
						// 	"provider": "wxpay",
						// 	"orderInfo": {
						// 		"appid": "wx499********7c70e", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						// 		"noncestr": "c5sEwbaNPiXAF3iv", // 随机字符串
						// 		"package": "Sign=WXPay", // 固定值
						// 		"partnerid": "148*****52", // 微信支付商户号
						// 		"prepayid": "wx202254********************fbe90000", // 统一下单订单号
						// 		"timestamp": 1597935292, // 时间戳（单位：秒）
						// 		"sign": "A842B45937F6EFF60DEC7A2EAA52D5A0" // 签名，这里用的 MD5/RSA 签名
						// 	},
						// 	success(res) {},
						// 	fail(e) {}
						// })


						// my.tradePay({
						// 	// provider: 'alipay',
						// 	"tradeNO": res.data.ordersNumber,
						// 	// orderInfo: {},//微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
						// 	success: function(res) {
						// 		// my.ap.openURL({
						// 		// 	url: 'https://www.cardplayd.com'
						// 		// })
						// 		uni.navigateTo({
						// 			url: '/pages/paySuccess/paySuccess'
						// 		})
						// 		console.log('success:' + JSON.stringify(res));
						// 	},
						// 	fail: function(err) {
						// 		console.log('fail:' + JSON.stringify(err));
						// 	}
						// });
					}
				})
			},
			gotoAddress() {
				uni.navigateTo({
					url: '/pages/address/address?IsSelectAddress=true'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goodsImage {
		width: 100%;
		height: 480rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.goodsInfo {
		background-color: #fff;
		padding: 20rpx;

		.box1 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx;
			font-size: 30rpx;
		}
	}

	.bottomBtn {
		width: 670rpx;
		height: 88rpx;
		background: #333;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 16rpx;
	}

	.payContent {
		.address {
			width: 660rpx;
			padding: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			border-bottom: 2rpx solid #cacaca;
		}

		.payGoods {
			padding: 40rpx 20rpx 280rpx;
			display: flex;
			box-sizing: border-box;

			.payGoodsImage {
				width: 160rpx;
				height: 160rpx;
				margin-right: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.box2 {
				width: 480rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.box3 {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}

		.payBtn {
			width: 670rpx;
			height: 88rpx;
			background-color: #333;
			color: #fff;
			text-align: center;
			margin: 0 auto;
			border-radius: 16rpx;
			line-height: 88rpx;
		}
	}

	.minus {
		width: 44rpx;
		height: 44rpx;
		border-width: 2rpx;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 200rpx;
		border-top-right-radius: 200rpx;
		border-bottom-left-radius: 200rpx;
		border-bottom-right-radius: 200rpx;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 20rpx;
	}

	.plus {
		width: 44rpx;
		height: 44rpx;
		border-width: 2rpx;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 200rpx;
		border-top-right-radius: 200rpx;
		border-bottom-left-radius: 200rpx;
		border-bottom-right-radius: 200rpx;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.add {
		line-height: 140rpx;
		display: flex;
		justify-content: center;
		font-size: 32rpx;
	}
</style>